<template>
  <view class="container m-b5">
    <!-- 顶部选项卡 -->
    <view class="swiper-tab dis-flex box-align-center flex-y-center">
      <view :class="'swiper-tab-item ' + ( currentTab== 0 ? 'on' : '')" data-current="0" @tap="swichNav">全部
        ({{ statistics.count_all }})
      </view>
      <view :class="'swiper-tab-item ' + (currentTab == 1 ? 'on' : '')" data-current="1" @tap="swichNav">好评
        ({{ statistics.count_goods }})
      </view>
      <view :class="'swiper-tab-item ' + (currentTab == 2 ? 'on' : '')" data-current="2" @tap="swichNav">中评
        ({{ statistics.count_middle }})
      </view>
      <view :class="'swiper-tab-item ' + (currentTab == 3 ? 'on' : '')" data-current="3" @tap="swichNav">差评
        ({{ statistics.count_bad }})
      </view>
    </view>

    <!-- 评价列表 -->
    <scroll-view :scroll-y="true" @scrolltolower="bindDownLoad" :style="'height: ' + swiperHeight + 'px;'">
      <view class="comment-list" v-if="list.length">
        <view class="comment-item" v-for="(item, index) in list" :key="index">
          <view class="goods-comment-box dis-flex flex-dir-column b-f b-b">
            <view class="row dis-flex flex-y-center">
              <!-- 用户信息 -->
              <view class="user dis-flex flex-y-center">
                <image class="user_avatar" mode="aspectFill" :src="item.avatar" ></image>
                <text class="user_name f-26">{{ item.username }}</text>
              </view>
              <!-- 评价评星 -->
              <view class="com_xing dis-flex flex-y-center">
                <text
                    v-for="n in 5"
                    :key="n"
                    class="iconfont icon-shoucang"
                    :class="{ active: n <= item.score }"
                ></text>

              </view>
              <!-- 评价日期 -->
              <view class="flex-box f-22 col-9 t-r">{{ item.created_at }}</view>
            </view>
            <!-- 评价内容 -->
            <view class="goods-comment-cont row m-top20">
              <text class="f-26">{{ item.content }}</text>
            </view>
            <!-- 评价图片 -->
            <view class="comment-images row" v-if="item.images.length">
              <view class="image-preview" v-for="(image, imgIndex) in item.images" :key="imgIndex">
                <image :data-comment-index="index" :data-img-index="imgIndex" @tap.stop.prevent="previewImages"
                       mode="aspectFill" :src="image"></image>
              </view>
            </view>
            <!-- 商品规格 -->
            <view class="row f-24 col-9">{{ item.goods_spec_name }}</view>
          </view>
        </view>
      </view>
      <view class="bsshop-notcont" v-else>
        <u-empty text="暂无评论" mode="list"></u-empty>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import comment_api from "@/common/comment_api";

export default {
  data() {
    return {

      // 列表高度
      swiperHeight: 0,

      // 页面参数
      options: {
        item_id: null,
      },
      currentTab: 0,
      // 评论列表
      list: [],

      // 当前页码
      page: 0,

      // show
      notcont: false,

      statistics: {
        count_all: 0,
        count_goods: 0,
        count_middle: 0,
        count_bad: 0
      },

      no_more: false,
      imgIndex: 0,
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {
    this.options = options;
    // 设置swiper的高度
    this.setSwiperHeight();
    this.getCommentList()
  },
  methods: {
    /**
     * 设置swiper的高度
     */
    setSwiperHeight: function () {
      // 获取系统信息(拿到屏幕宽度)
      let systemInfo = uni.getSystemInfoSync();
      let rpx = systemInfo.windowWidth / 750;
      let // 计算rpx
          tapHeight = Math.floor(rpx * 80) + 1;
      let // tap高度
          swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
      this.setData({
        swiperHeight
      });
    },

    /**
     * 获取评论列表
     */
    getCommentList: function () {
      let that = this;
      that.page++;
      comment_api.list({
        page: that.page,
        item_id: that.options.item_id,
        type: this.currentTab
      }).then(res => {
        if (res.code !== 0) {
          that.$u.toast(res.msg);
          setTimeout(function () {
            uni.navigateBack();
          }, 2000)
          return;
        }
        that.statistics = res.data.statistics;
        if (res.data.list.length === 0) {
          if (that.page > 1) {
            that.show_msg('没有更多啦')
          }
          return;
        }
        if (that.page == 1) {
          that.list = res.data.list;
        } else {
          that.list = that.list.concat(res.data.list);
        }

      })
    },

    /**
     * 点击tab切换
     */
    swichNav: function (e) {
      let that = this;
      this.list = [];
      this.page = 0;
      this.no_more = false;
      this.currentTab = e.currentTarget.dataset.current;
      this.getCommentList()
    },

    /**
     * 图片预览
     */
    previewImages: function (e) {
      let commentIndex = e.target.dataset.commentIndex;
      let imgIndex = e.target.dataset.imgIndex;
      let images = this.list[commentIndex].images;
      let imageUrls = [];
      images.forEach(function (item) {
        imageUrls.push(item);
      });
      uni.previewImage({
        current: imageUrls[imgIndex],
        urls: imageUrls
      });
    },

    /**
     * 下拉到底加载数据
     */
    bindDownLoad: function () {
      this.getCommentList();
    }
  }
};
</script>
<style lang="scss">
@import 'index.scss';
</style>
